<template>
  <div class="videolist">
    <Loading v-if="loading"></Loading>
    <template v-else>
      <div class="list">
        <ul>
          <RecommendItem
            v-for="item in list"
            :key="item.r.id + Math.random() * 10"
            :item="item"
          ></RecommendItem>
          <Loading v-if="moreLoading"></Loading>
          <li class="tomore" v-else @click="tomore">加载更多</li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script>
import RecommendItem from "@/components/RecommendItem.vue";
import Loading from "@/components/Loading.vue";
export default {
  components: {
    RecommendItem,
    Loading,
  },
  data: function () {
    return {
      page: 0,
      list: [],
      loading: false,
      moreLoading: false,
    };
  },
  created: function () {
    this.loading = true;
    this.axios
      .get(`https://apis.netstart.cn/douguo/home/videos/${this.page}/20`)
      .then((res) => {
        this.list = res.data.result.list;
        this.loading = false;
      });
  },
  methods: {
    tomore() {
      this.moreLoading = true;
      this.axios
        .get(`https://apis.netstart.cn/douguo/home/recommended/${this.page}/20`)
        .then((res) => {
          // console.log(res.data);
          // this.banner = res.data.result.banner;
          this.list = [
            ...this.list,
            ...res.data.result.list.filter((ele) => (ele.r ? ele : false)),
          ];
          this.moreLoading = false;
          this.page += 20;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.videolist {
  margin-top: calc(9vw + 15px + 45px);
  .tomore {
    text-align: center;
    color: #aaa;
    padding: 5px 0;
  }
}
</style>